<template>
  <div class="festival_main">
    <a-card title="硒都节日" class="card_main">
      <a-card
        hoverable
        style="width: 30em; margin: 10px 10px"
        v-for="item in festivalData"
        :key="item.id"
        class="card_list"
				@click="removeItem(item)"
      >
        <template #cover>
          <img alt="example" :src="item.imageUrl" />
        </template>
        <a-card-meta :title="item.name">
          <template #description>
            <p>{{ item.time }}</p>
            <p>{{ item.description }}</p>
          </template>
        </a-card-meta>
      </a-card>
      <a-modal
        v-model:visible="dialogStatu"
        title="删除节日"
        @ok="handleOk"
        destroyOnClose
      >
        你确定要删除
        <span style="color: #ffcc33">{{ removeList?.name }}</span> 吗？
      </a-modal>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { customsList, deleteCustoms } from "@/utils/fetch/api";
import { message } from "ant-design-vue";
export default defineComponent({
  components: {},
  setup() {
    const loading = ref<any>(false);
    const festivalData = ref<any>();
    const refresh = async () => {
      const data = await customsList({ pageNum: 1 });
      festivalData.value = data.data.data;
    };
    onMounted(() => {
      loading.value = true;
      refresh();
      loading.value = false;
    });

    const dialogStatu = ref<boolean>(false);
    const removeList = ref<any>();
    const removeItem = (item: any) => {
      dialogStatu.value = true;
      removeList.value = item;
    };
    const handleOk = async () => {
      try {
        const data = await deleteCustoms(removeList.value.id);
        refresh();
        message.success("删除成功！");
        setTimeout(() => {
          dialogStatu.value = false;
        }, 1000);
      } catch (err) {
        console.error(err);
      }
    };
    return {
      festivalData,
			removeItem,
      dialogStatu,
      handleOk,
			removeList
    };
  },
});
</script>

<style lang="less" scoped>
.festival_main {
  width: 100%;
  height: 100%;
  background: white;
  padding: 20px;
  /deep/.card_main {
    .ant-card-head-title {
      font-size: 3em;
    }
  }
  .card_list {
    float: left;
  }
  .card_list::after {
    content: "";
    clear: both;
  }
}
</style>
